<div class="gn-facet-list">

  <!--Collapse all button for first panel-->
  <div class="btn-group width-100 flex-row flex-left" ng-hide="isTabMode">
    <button type="button" class="btn btn-default btn-sm gn-facet-toggle-btn"
      ng-click="expandAll()" title="{{'expandAllFacet' | translate}}">
      <i class="fa fa-plus-circle"/>
      <span translate>expandAllFacetLabel</span>
    </button>
    <button type="button" class="btn btn-default btn-sm gn-facet-toggle-btn"
      ng-click="collapseAll()" title="{{'collapseAllFacet' | translate}}">
      <i class="fa fa-minus-circle"/>
      <span translate>collapseAllFacetLabel</span>
    </button>
  </div>

  <div data-ng-if="!isTabMode"
       data-ng-repeat="f in dimension"
       data-ng-init="fLabel = getLabel(f);fLvlCollapse[fLabel] = false"
       class="gn-facet gn-facet-{{f['@label']}}"
       data-ng-show="f.category && isDisplayed(f)">

    <h4 data-gn-collapsible="fLvlCollapse[fLabel]">
      <i class="fa fa-fw" data-ng-class="fLvlCollapse[fLabel] ? 'fa-arrow-circle-right' : 'fa-arrow-circle-down'"></i>
      {{fLabel | translate}}
    </h4>
    <div data-gn-facet-dimension-category="f.category"
         data-category-key="fLabel"
         data-page-size="getPageSize(f)";
         data-params="params"
         data-facet-config="facetConfig"
         data-ng-class="{'collapse': fLvlCollapse[fLabel]}">
    </div>
  </div>



  <ul class="nav nav-pills" data-ng-if="isTabMode">
    <li data-ng-repeat="c in tabs.category"
        data-ng-init="path = buildPath(c);"
        role="presentation"
        data-ng-class="{'active': c.isSelected}">
      <a href="" title="{{c['@label'] || c['@value']}}"
         data-ng-click="filter(c, $event)">
        <span class="gn-facet-label">{{(c['@label'] || c['@value']) | characters:30}}</span>&nbsp;
        <span class="gn-facet-count">({{c['@count']}})</span>
      </a>
    </li>
  </ul>
</div>
